<template>
    <div>
        <h2>用户列表</h2>
        <table class="table table-bordered table-striped">
            <thead>
                <tr v-for="item in labelist" :key="item">
                    <th>{{ item.id }}</th>
                    <th>{{ item.name }}</th>
                    <th>{{ item.age }}</th>
                    <th>{{ item.position }}</th>
                    <th>{{ item.option }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in userlist" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.position }}</td>
                    <td>
                        <span>
                            <button class="btn btn-warning btn-sm min-btn" type="button">修改</button>
                        </span>
                        <span>
                            <button class="btn btn-danger btn-sm min-btn" type="button">删除</button>
                        </span>
                        <span>
                            <router-link :to="`/main/mes/${item.id}`">详情</router-link>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>


</template>

<script>
export default {
    name: "mes",
    data() {
        return {
            labelist: [{
                id: "序号",
                name: "名称",
                age: "年龄",
                position: "外号",
                option: "操作"
            }],
            userlist: [{
                id: 1, name: "嬴政", age: 18, position: "始皇帝"
            }, {
                id: 2, name: "李斯", age: 35, position: "丞相"
            }, {
                id: 3, name: "吕不韦", age: 50, position: "商人"
            }, {
                id: 4, name: "赵记", age: 48, position: "王太后"
            }, {
                id: 5, name: "心愉", age: 24, position: "老婆"
            }, {
                id: 3, name: "吕不韦", age: 50, position: "商人"
            }, {
                id: 4, name: "赵记", age: 48, position: "王太后"
            }, {
                id: 5, name: "心愉", age: 24, position: "老婆"
            }]
        }
    }
}
</script>

<style lang="less" scoped>
span {
    margin-left: 20px;
}

.router-active {
    text-decoration: none;
    color: red;
    font-weight: bold;
}
</style>